<html lang="en" class=""><head>

    <meta charset="UTF-8">
    <title>CodePen Demo</title>

    <meta name="robots" content="noindex">

    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
    <link rel="mask-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111">
    <link rel="canonical" href="https://codepen.io/JavaScriptJunkie/pen/vzWPbV">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

    <style id="INLINE_PEN_STYLESHEET_ID">
        @import url("https://fonts.googleapis.com/css?family=Dosis:400,600,700,800");
        @font-face {
            font-family: "Uni Sans";
            src: url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168547/unisans-font/UniSansHeavyCAPS.woff2") format("woff2"), url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168547/unisans-font/UniSansHeavyCAPS.woff") format("woff"), url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168548/unisans-font/UniSansHeavyCAPS.ttf") format("truetype");
            font-weight: 900;
            font-style: normal;
        }
        @font-face {
            font-family: "Uni Sans";
            src: url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168545/unisans-font/UniSansThinCAPS.woff2") format("woff2"), url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168545/unisans-font/UniSansThinCAPS.woff") format("woff"), url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168548/unisans-font/UniSansThinCAPS.ttf") format("truetype");
            font-weight: 500;
            font-style: normal;
        }
        body {
            font-family: "Uni Sans", sans-serif;
            font-weight: 500;
        }

        * {
            box-sizing: border-box;
        }

        img {
            max-width: 100%;
        }

        a {
            text-decoration: none;
        }

        .icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            stroke-width: 0;
            stroke: currentColor;
            fill: currentColor;
        }

        .wrapper {
            width: 100%;
            height: 100vh;
            min-height: 750px;
            background: url(https://res.cloudinary.com/muhammederdem/image/upload/v1536405234/starwars/death_star.jpg) center no-repeat;
            background-size: cover;
            position: relative;
            overflow: hidden;
            display: flex;
        }
        @media screen and (max-width: 992px) {
            .wrapper {
                height: auto;
                min-height: 100vh;
            }
        }

        .content {
            height: 600px;
            margin: auto;
            width: 100%;
            max-width: 1050px;
            display: flex;
            align-items: center;
            position: relative;
        }
        @media screen and (max-width: 1200px) {
            .content {
                max-width: 920px;
            }
        }
        @media screen and (max-width: 992px) {
            .content {
                max-width: 920px;
                margin-top: 100px;
                height: auto;
                min-height: 100vh;
            }
        }
        @media screen and (max-width: 767px) {
            .content {
                margin-top: 20px;
            }
        }
        @media screen and (max-width: 576px) {
            .content {
                margin-top: 20px;
                margin-bottom: 20px;
            }
        }

        .bg-shape {
            height: 100%;
            background-image: linear-gradient(-45deg, #cc3843 0%, #cb193f 100%);
            box-shadow: 0px 30px 139px 0px rgba(10, 22, 31, 0.26);
            border-radius: 30px;
            padding: 45px 40px;
            width: 50%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
        }
        @media screen and (max-width: 1200px) {
            .bg-shape {
                width: 45%;
            }
        }
        @media screen and (max-width: 992px) {
            .bg-shape {
                width: 90%;
                height: 290px;
                align-items: flex-start;
                padding: 50px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        @media screen and (max-width: 767px) {
            .bg-shape {
                padding: 30px;
                width: 95%;
                border-radius: 20px;
            }
        }
        @media screen and (max-width: 576px) {
            .bg-shape {
                height: 200px;
                padding: 30px;
            }
        }
        .bg-shape img {
            object-fit: contain;
            width: 510px;
            display: block;
            object-position: left center;
            opacity: 0.2;
            transform: rotate(-90deg) translateY(-50%);
            max-width: inherit;
            left: 10px;
            position: absolute;
        }
        @media screen and (max-width: 1200px) {
            .bg-shape img {
                width: 430px;
                left: 10px;
            }
        }
        @media screen and (max-width: 992px) {
            .bg-shape img {
                transform: none;
                width: 100%;
                position: relative;
                left: auto;
                margin-left: auto;
                margin-right: auto;
                object-fit: contain;
                height: 100%;
                object-position: top center;
            }
        }

        .next, .prev {
            z-index: 22;
            display: inline-flex;
            border: none;
            width: 61px;
            height: 61px;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            font-size: 25px;
            position: absolute;
            top: 50%;
            outline: none;
            cursor: pointer;
        }
        .next.disabled, .prev.disabled {
            cursor: not-allowed;
        }
        .next:focus, .prev:focus {
            outline: none;
        }
        @media screen and (max-width: 992px) {
            .next, .prev {
                top: 170px;
            }
        }

        .prev {
            left: -30%;
            transform: translate(-100%, -50%);
        }
        @media screen and (max-width: 1200px) {
            .prev {
                left: -21%;
            }
        }
        @media screen and (max-width: 992px) {
            .prev {
                left: 0;
                transform: translate(-50%, -50%);
            }
        }
        @media screen and (max-width: 576px) {
            .prev {
                transform: translate(20%, -50%);
            }
        }

        .next {
            right: 0;
            transform: translate(50%, -50%);
        }
        @media screen and (max-width: 576px) {
            .next {
                transform: translate(-20%, -50%);
            }
        }

        .product-slider {
            width: 75%;
            height: 85%;
            border-radius: 30px;
            box-shadow: 0 28px 79px 0 rgba(10, 22, 31, 0.35);
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        @media screen and (max-width: 1200px) {
            .product-slider {
                width: 80%;
            }
        }
        @media screen and (max-width: 992px) {
            .product-slider {
                width: 80%;
                left: 50%;
                transform: translateX(-50%);
                height: auto;
                position: relative;
                top: 0;
                margin-top: 170px;
                margin-bottom: 100px;
            }
            .product-slider br {
                display: none;
            }
        }
        @media screen and (max-width: 767px) {
            .product-slider {
                border-radius: 20px;
            }
        }
        @media screen and (max-width: 576px) {
            .product-slider {
                width: 85%;
                margin-top: 130px;
            }
        }
        .product-slider__wrp {
            height: 100%;
        }
        .product-slider__item {
            position: relative;
            height: 100%;
            width: 100%;
        }
        @media screen and (max-width: 992px) {
            .product-slider__item {
                height: auto;
            }
        }
        .product-slider__item.swiper-slide-active .product-slider__content > * {
            opacity: 1;
            transform: none;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(1) {
            transition-delay: 0s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(2) {
            transition-delay: 0.2s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(3) {
            transition-delay: 0.4s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(4) {
            transition-delay: 0.6s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(5) {
            transition-delay: 0.8s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(6) {
            transition-delay: 1s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(7) {
            transition-delay: 1.2s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(8) {
            transition-delay: 1.4s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(9) {
            transition-delay: 1.6s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(10) {
            transition-delay: 1.8s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(11) {
            transition-delay: 2s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(12) {
            transition-delay: 2.2s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(13) {
            transition-delay: 2.4s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(14) {
            transition-delay: 2.6s;
        }
        .product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(15) {
            transition-delay: 2.8s;
        }
        .product-slider__item.swiper-slide-active circle {
            animation: progress 1s ease-out forwards;
            animation-delay: 0.5s;
            opacity: 0.75;
        }
        .product-slider__card {
            height: 100%;
            display: flex;
            align-items: center;
            width: 100%;
            transition: all 0.5s;
            overflow: hidden;
            position: relative;
            border-radius: 30px;
        }
        @media screen and (max-width: 992px) {
            .product-slider__card {
                align-items: flex-start;
            }
        }
        @media screen and (max-width: 767px) {
            .product-slider__card {
                border-radius: 20px;
            }
        }
        .product-slider__cover {
            border-radius: 30px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        @media screen and (max-width: 767px) {
            .product-slider__cover {
                border-radius: 20px;
            }
        }
        .product-slider__content {
            color: #fff;
            padding-top: 1px;
            position: relative;
            z-index: 2;
            width: 100%;
            padding-left: 250px;
            padding-right: 80px;
        }
        @media screen and (max-width: 1200px) {
            .product-slider__content {
                padding-left: 220px;
            }
        }
        @media screen and (max-width: 992px) {
            .product-slider__content {
                padding: 20px 60px 100px;
                padding-top: 280px;
                text-align: center;
            }
        }
        @media screen and (max-width: 767px) {
            .product-slider__content {
                padding: 20px 30px 50px;
                padding-top: 300px;
            }
        }
        @media screen and (max-width: 576px) {
            .product-slider__content {
                padding-top: 220px;
                padding-left: 15px;
                padding-right: 15px;
            }
        }
        .product-slider__title {
            margin: 0;
            margin-bottom: 10px;
            font-weight: 900;
            font-size: 41px;
            line-height: 1.2em;
            letter-spacing: 2px;
            opacity: 0;
            transform: translateY(55px);
            transition: all 0.5s;
        }
        @media screen and (max-width: 1200px) {
            .product-slider__title {
                font-size: 34px;
            }
        }
        @media screen and (max-width: 576px) {
            .product-slider__title {
                font-size: 24px;
            }
        }
        .product-slider__price {
            display: block;
            font-size: 42px;
            opacity: 0;
            transform: translateY(55px);
            transition: all 0.5s;
        }
        @media screen and (max-width: 1200px) {
            .product-slider__price {
                font-size: 36px;
            }
        }
        @media screen and (max-width: 576px) {
            .product-slider__price {
                font-size: 30px;
            }
        }
        .product-slider__price sup {
            top: -20px;
            font-size: 65%;
        }
        .product-slider__cart {
            box-shadow: 0 7px 99px 0 rgba(204, 51, 66, 0.6);
            background-image: linear-gradient(-45deg, #cc3843 0%, #cb193f 100%);
            border: none;
            color: #fff;
            padding: 10px 30px;
            border-radius: 50px;
            min-height: 50px;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 2px;
            margin-right: 40px;
            cursor: pointer;
        }
        @media screen and (max-width: 768px) {
            .product-slider__cart {
                margin-right: 30px;
            }
        }
        @media screen and (max-width: 576px) {
            .product-slider__cart {
                width: 100%;
                max-width: 300px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 50px;
            }
        }
        .product-slider__fav {
            color: #888e94;
            background: none;
            border: none;
            position: relative;
            padding-left: 25px;
            outline: none;
            cursor: pointer;
        }
        .product-slider__fav:focus {
            outline: none;
        }
        .product-slider__fav .heart {
            display: block;
            position: absolute;
            left: 0;
            transform: translate(-50%, -50%) scale(0.7);
            top: 50%;
            pointer-events: none;
            width: 100px;
            height: 100px;
            background: url("https://res.cloudinary.com/muhammederdem/image/upload/v1536405215/starwars/heart.png") no-repeat;
            background-position: 0 0;
            cursor: pointer;
            transition: background-position 1s steps(28);
            transition-duration: 0s;
        }
        .product-slider__fav .heart.is-active {
            transition-duration: 1s;
            background-position: -2800px 0;
        }
        .product-slider__bottom {
            margin-top: 20px;
            opacity: 0;
            transform: translateY(55px);
            transition: all 0.5s;
        }
        .product-ctr {
            display: flex;
            align-items: center;
            min-height: 150px;
            margin-top: 40px;
            opacity: 0;
            transform: translateY(55px);
            transition: all 0.5s;
        }
        @media screen and (max-width: 992px) {
            .product-ctr {
                justify-content: center;
            }
        }
        .product-ctr .hr-vertical {
            width: 1px;
            background: #9fa3a7;
            align-self: stretch;
            margin: 0 35px;
            flex-shrink: 0;
            opacity: 0.5;
        }
        @media screen and (max-width: 767px) {
            .product-ctr {
                justify-content: center;
                flex-wrap: wrap;
                margin-bottom: 40px;
            }
            .product-ctr .hr-vertical {
                width: 100%;
                margin: 35px 0;
                height: 1px;
            }
        }
        @media screen and (max-width: 767px) {
            .product-labels {
                width: 100%;
            }
        }
        .product-labels__checkbox {
            display: none;
        }
        .product-labels__checkbox:checked + .product-labels__txt {
            border-color: #cc3743;
            padding: 10px 13px;
        }
        .product-labels__title {
            font-family: "Dosis", sans-serif;
            font-weight: 700;
            letter-spacing: 3px;
            font-size: 16px;
            margin-bottom: 10px;
        }
        .product-labels__group {
            display: flex;
            margin-bottom: 15px;
        }
        @media screen and (max-width: 992px) {
            .product-labels__group {
                justify-content: center;
            }
        }
        .product-labels__group:last-child {
            margin-bottom: 0;
        }
        .product-labels__item {
            margin: 5px;
            cursor: pointer;
        }
        .product-labels__item:first-child {
            margin-left: 0;
        }
        .product-labels__txt {
            display: block;
            border: 2px solid transparent;
            font-size: 14px;
            padding: 10px 20px;
            padding-left: 0;
            border-radius: 50px;
            transition: all 0.3s;
            letter-spacing: 2px;
        }
        @keyframes progress {
            0% {
                stroke-dasharray: 0 100;
            }
        }
        .product-inf {
            text-align: center;
        }
        @media screen and (max-width: 767px) {
            .product-inf {
                width: 100%;
            }
        }
        .product-inf__percent {
            font-weight: 700;
            font-size: 22px;
            letter-spacing: 1px;
            margin-bottom: 12px;
            font-family: "Dosis", sans-serif;
            position: relative;
        }
        .product-inf__percent circle {
            transform: rotate(180deg) scaleY(-1);
            transform-origin: 50%;
        }
        .product-inf__percent-txt {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .product-inf__title {
            font-family: "Dosis", sans-serif;
            font-weight: 700;
            letter-spacing: 2px;
            font-size: 18px;
        }
        .product-img {
            position: absolute;
            z-index: 2;
            width: 500px;
            left: 25%;
            transform: translateX(-45%);
            max-height: 500px;
            height: 100%;
            pointer-events: none;
        }
        @media screen and (max-width: 1200px) {
            .product-img {
                width: 430px;
                left: 20%;
            }
        }
        @media screen and (max-width: 992px) {
            .product-img {
                width: 430px;
                left: 50%;
                transform: translateX(-50%);
                top: 0;
                height: 350px;
            }
        }
        @media screen and (max-width: 767px) {
            .product-img {
                width: 100%;
                max-width: 400px;
                top: 30px;
                height: 390px;
            }
        }
        @media screen and (max-width: 576px) {
            .product-img {
                max-width: 300px;
                height: 300px;
            }
        }
        .product-img__item {
            display: flex;
            align-items: center;
            position: absolute;
            pointer-events: none;
            user-select: none;
            top: 50%;
            right: 0;
            transform: translateY(-50%) translateX(-130px);
            opacity: 0;
            transition: all 0.3s;
        }
        .product-img__item.active {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
            transition-delay: 0.3s;
        }
        .product-img__item img {
            object-fit: contain;
            object-position: center right;
        }

        .social {
            position: absolute;
            bottom: 10px;
            right: 0;
            width: 100%;
            display: flex;
            padding: 20px 55px;
            justify-content: space-between;
        }
        @media screen and (max-width: 576px) {
            .social {
                flex-direction: column;
                bottom: 0;
            }
        }
        .social__item {
            color: rgba(255, 255, 255, 0.75);
            font-family: "Dosis", sans-serif;
            font-weight: 700;
            letter-spacing: 2px;
            line-height: 1em;
            display: flex;
            align-items: center;
            transition: all 0.3s;
        }
        .social__item:hover {
            color: #fff;
        }
        @media screen and (max-width: 576px) {
            .social__item {
                margin-bottom: 10px;
            }
        }
        .social__img {
            width: 24px;
            margin-right: 15px;
        }
    </style>


    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
    <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js"></script>
    <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script>
    <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>
</head>

<body>
<div class="wrapper">

    <div class="content">
        <div class="bg-shape">
            <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405214/starwars/logo.webp" alt="">
        </div>


        <div class="product-img">

            <div class="product-img__item active" id="img1">
                <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-1.webp" alt="star wars" class="product-img__img">
            </div>

            <div class="product-img__item" id="img2">
                <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-2.webp" alt="star wars" class="product-img__img">
            </div>

            <div class="product-img__item" id="img3">
                <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405218/starwars/item-3.webp" alt="star wars" class="product-img__img">
            </div>

            <div class="product-img__item" id="img4">
                <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405215/starwars/item-4.webp" alt="star wars" class="product-img__img">
            </div>


        </div>



        <div class="product-slider swiper-container-fade swiper-container-horizontal">
            <button class="prev" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="false">
        <span class="icon">
          <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-left"></use></svg>
        </span>
            </button>
            <button class="next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false">
        <span class="icon">
          <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
        </span>
            </button>

            <div class="product-slider__wrp swiper-wrapper" style="transition-duration: 0ms;">
                <div class="product-slider__item swiper-slide swiper-slide-prev" data-target="img4" style="width: 788px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
                    <div class="product-slider__card">
                        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405223/starwars/item-4-bg.webp" alt="star wars" class="product-slider__cover">
                        <div class="product-slider__content">
                            <h1 class="product-slider__title">
                                STORMTROPER <br>
                                HELMET
                            </h1>
                            <span class="product-slider__price">$1.299,<sup>99</sup></span>
                            <div class="product-ctr">
                                <div class="product-labels">
                                    <div class="product-labels__title">HELMET SIZE</div>

                                    <div class="product-labels__group">
                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type5">
                                            <span class="product-labels__txt">S</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type5" checked="">
                                            <span class="product-labels__txt">M</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type5">
                                            <span class="product-labels__txt">L</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type5">
                                            <span class="product-labels__txt">XL</span>
                                        </label>

                                    </div>

                                </div>

                                <span class="hr-vertical"></span>

                                <div class="product-inf">
                                    <div class="product-inf__percent">
                                        <div class="product-inf__percent-circle">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                                                <defs>
                                                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                                        <stop offset="0%" stop-color="#0c1e2c" stop-opacity="0"></stop>
                                                        <stop offset="100%" stop-color="#cb2240" stop-opacity="1"></stop>
                                                    </linearGradient>
                                                </defs>
                                                <circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"></circle>
                                            </svg>
                                        </div>
                                        <div class="product-inf__percent-txt">
                                            80%
                                        </div>
                                    </div>

                                    <span class="product-inf__title">DURABILITY RATE</span>
                                </div>

                            </div>

                            <div class="product-slider__bottom">
                                <button class="product-slider__cart">
                                    ADD TO CART
                                </button>

                                <button class="product-slider__fav js-fav"><span class="heart"></span> ADD TO WISHLIST</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-slider__item swiper-slide swiper-slide-active" data-target="img1" style="width: 788px; opacity: 1; transform: translate3d(-788px, 0px, 0px); transition-duration: 0ms;">
                    <div class="product-slider__card">
                        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405222/starwars/item-1-bg.webp" alt="star wars" class="product-slider__cover">
                        <div class="product-slider__content">
                            <h1 class="product-slider__title">
                                IMPERIAL  ARMY’S <br> TIE FIGHTER
                            </h1>
                            <span class="product-slider__price">$9.999,<sup>99</sup></span>
                            <div class="product-ctr">
                                <div class="product-labels">
                                    <div class="product-labels__title">ENGINE UNIT</div>

                                    <div class="product-labels__group">
                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type1" checked="">
                                            <span class="product-labels__txt">P-S4 TWIN</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type1">
                                            <span class="product-labels__txt">P-W401</span>
                                        </label>
                                    </div>

                                </div>

                                <span class="hr-vertical"></span>

                                <div class="product-inf">
                                    <div class="product-inf__percent">
                                        <div class="product-inf__percent-circle">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                                                <defs>
                                                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                                        <stop offset="0%" stop-color="#0c1e2c" stop-opacity="0"></stop>
                                                        <stop offset="100%" stop-color="#cb2240" stop-opacity="1"></stop>
                                                    </linearGradient>
                                                </defs>
                                                <circle cx="50" cy="50" r="47" stroke-dasharray="225, 300" stroke="#cb2240" stroke-width="4" fill="none"></circle>
                                            </svg>
                                        </div>
                                        <div class="product-inf__percent-txt">
                                            75%
                                        </div>
                                    </div>

                                    <span class="product-inf__title">DURABILITY</span>
                                </div>

                            </div>

                            <div class="product-slider__bottom">
                                <button class="product-slider__cart">
                                    ADD TO CART
                                </button>

                                <button class="product-slider__fav js-fav"><span class="heart"></span> ADD TO WISHLIST</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="product-slider__item swiper-slide swiper-slide-next" data-target="img2" style="width: 788px; opacity: 0; transform: translate3d(-1576px, 0px, 0px); transition-duration: 0ms;">
                    <div class="product-slider__card">
                        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405222/starwars/item-2-bg.webp" alt="star wars" class="product-slider__cover">
                        <div class="product-slider__content">
                            <h1 class="product-slider__title">
                                KYLO REN'S <br> LIGHTSABER
                            </h1>
                            <span class="product-slider__price">$1.699,<sup>99</sup></span>
                            <div class="product-ctr">
                                <div class="product-labels">
                                    <div class="product-labels__title">VOLTAGE RANGE</div>

                                    <div class="product-labels__group">
                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type3" checked="">
                                            <span class="product-labels__txt">2000 <sup>WATT</sup></span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type3">
                                            <span class="product-labels__txt">2800 <sup>WATT</sup></span>
                                        </label>
                                    </div>

                                    <div class="product-labels__title">LASER SIZE</div>

                                    <div class="product-labels__group">
                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type2">
                                            <span class="product-labels__txt">S</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type2" checked="">
                                            <span class="product-labels__txt">M</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type2">
                                            <span class="product-labels__txt">L</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type2">
                                            <span class="product-labels__txt">XL</span>
                                        </label>

                                    </div>

                                </div>

                                <span class="hr-vertical"></span>

                                <div class="product-inf">
                                    <div class="product-inf__percent">
                                        <div class="product-inf__percent-circle">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                                                <defs>
                                                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                                        <stop offset="0%" stop-color="#0c1e2c" stop-opacity="0"></stop>
                                                        <stop offset="100%" stop-color="#cb2240" stop-opacity="1"></stop>
                                                    </linearGradient>
                                                </defs>
                                                <circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"></circle>
                                            </svg>
                                        </div>
                                        <div class="product-inf__percent-txt">
                                            80%
                                        </div>
                                    </div>

                                    <span class="product-inf__title">DURABILITY</span>
                                </div>

                            </div>

                            <div class="product-slider__bottom">
                                <button class="product-slider__cart">
                                    ADD TO CART
                                </button>

                                <button class="product-slider__fav js-fav"><span class="heart"></span> ADD TO WISHLIST</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="product-slider__item swiper-slide" data-target="img3" style="width: 788px; opacity: 0; transform: translate3d(-2364px, 0px, 0px); transition-duration: 0ms;">
                    <div class="product-slider__card">
                        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405215/starwars/item-3-bg.webp" alt="star wars" class="product-slider__cover">
                        <div class="product-slider__content">
                            <h1 class="product-slider__title">
                                IMPERIAL ARMY'S <br>
                                DEATH STAR
                            </h1>
                            <span class="product-slider__price">$9.999,<sup>99</sup></span>
                            <div class="product-ctr">
                                <div class="product-labels">
                                    <div class="product-labels__title">HYPERDRIVE RATING</div>

                                    <div class="product-labels__group">
                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type6" checked="">
                                            <span class="product-labels__txt">CLASS 4</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type6">
                                            <span class="product-labels__txt">CLASS 20</span>
                                        </label>
                                    </div>

                                    <div class="product-labels__title">ARMANENT</div>

                                    <div class="product-labels__group">
                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type7" checked="">
                                            <span class="product-labels__txt">SUPERLASER</span>
                                        </label>

                                        <label class="product-labels__item">
                                            <input type="radio" class="product-labels__checkbox" name="type7">
                                            <span class="product-labels__txt">TURBOLASER</span>
                                        </label>
                                    </div>

                                </div>

                                <span class="hr-vertical"></span>

                                <div class="product-inf">
                                    <div class="product-inf__percent">
                                        <div class="product-inf__percent-circle">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                                                <defs>
                                                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                                        <stop offset="0%" stop-color="#0c1e2c" stop-opacity="0"></stop>
                                                        <stop offset="100%" stop-color="#cb2240" stop-opacity="1"></stop>
                                                    </linearGradient>
                                                </defs>
                                                <circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"></circle>
                                            </svg>
                                        </div>
                                        <div class="product-inf__percent-txt">
                                            80%
                                        </div>
                                    </div>

                                    <span class="product-inf__title">DURABILITY RATE</span>
                                </div>

                            </div>

                            <div class="product-slider__bottom">
                                <button class="product-slider__cart">
                                    ADD TO CART
                                </button>

                                <button class="product-slider__fav js-fav"><span class="heart"></span> ADD TO WISHLIST</button>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>

    </div>

    <div class="social">
        <a href="https://twitter.com/imuhammederdem" target="_blank" class="social__item">
            <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405220/starwars/twitter.webp" alt="muhammed erdem" class="social__img">
            <span class="social__txt">Coded By Muhammed Erdem</span>
        </a>

        <a href="https://dribbble.com/shots/3453028-Star-Wars-TIE-Fighter-UI" target="_blank" class="social__item">
            <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405220/starwars/dribbble.webp" alt="eray yeşilyurt" class="social__img">
            <span class="social__txt">Designed By Eray Yeşilyurt</span>
        </a>

    </div>

</div>
<svg class="hidden" hidden="">
    <symbol id="icon-arrow-left" viewBox="0 0 32 32">
        <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
    </symbol>
    <symbol id="icon-arrow-right" viewBox="0 0 32 32">
        <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
    </symbol>
</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script>
<script src="./script.js" crossorigin=""></script>


</body></html>